import React from 'react'
import 'remixicon/fonts/remixicon.css'
import UserInfo from './UserInfo'

interface DropdownItemProps {
  icon: string
  text: string
  link: string
  external?: boolean
}

const DropdownItem: React.FC<DropdownItemProps> = ({
  icon,
  text,
  link,
  external = false,
}) => {
  if (external) {
    return (
      <a
        href={link}
        target="_blank"
        rel="noopener noreferrer"
        className="dropdown-item"
      >
        <i className={icon}></i>
        {text}
      </a>
    )
  }
  return (
    <a href={link} className="dropdown-item">
      <i className={icon}></i>
      {text}
    </a>
  )
}

interface NavItemProps {
  title: string
  icon: string
  children: React.ReactNode
}

const NavItem: React.FC<NavItemProps> = ({ title, icon, children }) => {
  return (
    <div className="nav-item">
      <a href="#">
        <i className={icon}></i>
        {title}
        <i className="ri-arrow-down-s-line"></i>
      </a>
      <div className="dropdown-menu">{children}</div>
    </div>
  )
}
const Topbar: React.FC = () => {
  return (
    <nav className="topbar">
      <div className="nav-menu">
        <NavItem title="其他博客" icon="ri-article-line">
          <DropdownItem
            icon="ri-code-box-line"
            text="CSDN"
            link="https://blog.csdn.net/qq_43682422?type=lately"
            external={true}
          />
          <DropdownItem
            icon="ri-book-2-line"
            text="掘金"
            link="https://juejin.cn/user/1209932880283655"
            external={true}
          />
        </NavItem>

        <NavItem title="代码仓库" icon="ri-git-repository-line">
          <DropdownItem
            icon="ri-git-repository-fill"
            text="Gitee"
            link="https://gitee.com/icy_akuya"
            external={true}
          />
          <DropdownItem
            icon="ri-github-fill"
            text="GitHub"
            link="https://github.com/icy-goodlike"
            external={true}
          />
        </NavItem>

        <NavItem title="友链" icon="ri-links-line">
          <DropdownItem
            icon="ri-user-smile-line"
            text="敖武的博客"
            link="https://z.wiki/tech/"
            external={true}
          />
        </NavItem>

        <NavItem title="工具" icon="ri-tools-line">
          <DropdownItem
            icon="ri-image-line"
            text="敖武的图床"
            link="https://playground.z.wiki/img-cloud/index.html"
            external={true}
          />
          <DropdownItem
            icon="ri-book-2-line"
            text="阿里语雀"
            link="https://www.yuque.com/dashboard"
            external={true}
          />
          <DropdownItem
            icon="ri-global-line"
            text="科学上网"
            link="https://raepa.com/"
            external={true}
          />
          <DropdownItem
            icon="ri-robot-line"
            text="ChatGPT"
            link="https://chat.openai.com"
            external={true}
          />
          <DropdownItem
            icon="ri-layout-line"
            text="Figma"
            link="https://www.figma.com"
            external={true}
          />
        </NavItem>

        <NavItem title="学习" icon="ri-tools-line">
          <DropdownItem
            icon="ri-book-3-line"
            text="前端灵题库"
            link="https://www.yuque.com/baiyueguang-rfnbu/tr4d0i"
            external={true}
          />
        </NavItem>
      </div>
      <div className="flex items-center gap-6 fixed right-20">
        <UserInfo />
      </div>
    </nav>
  )
}

export default Topbar
